require('./PageHome.less');

import React,{Component} from 'react';
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Dialog, Page,  Panel,  PanelHeader,  PanelBody,  PanelFooter,  MediaBox,  MediaBoxHeader,  MediaBoxBody,  MediaBoxTitle,  MediaBoxDescription,  MediaBoxInfo,  MediaBoxInfoMeta,  Cells,  Cell,  CellsTitle,  CellHeader,  CellBody,  CellFooter,  Flex,  FlexItem,  Swiper} from  'react-weui/build/packages'
import 'weui';
import 'react-weui/build/packages/react-weui.css';
import Zjtt  from './../../assets/icon/zhzj/住建头条.png';
import Ycgzh  from './../../assets/icon/yc/扬尘公众号.jpg';
import { Control } from 'react-keeper'
import MFooter from './../../components/mfooter'
import imgSrc from './../../assets/img/banner1.jpg'
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      titleDialog: '提示信息',
      showDialog: false,
      messageDialog: '建设中,敬请期待!'
    }

    this.showDialog = this.showDialog.bind(this);
    this.hideDialog = this.hideDialog.bind(this);
  }

  showDialog() {
    this.setState({
      showDialog: true,
    });
  }

  hideDialog() {
    this.setState({
      showDialog: false,
    });
  }

  handleRouter(obj) {
    switch (obj.key) {
      case 'dgzs':
        Control.go(obj.router);
        break;
      case 'lsgd':
        Control.go(obj.router);
        break;
      case 'jdcx':
        Control.go(obj.router);
        break;
      case 'gsgg':
        Control.go(obj.router);
        break;
      case 'cxzj':
        Control.go(obj.router);
        break;
      case 'wdj':
        Control.go(obj.router);
        break;
      case 'csjs':
        Control.go(obj.router);
        break;
      case 'jdzf':
        Control.go(obj.router);
        break;
      case 'yczy':
        this.setState({
          showDialog: true,
          messageDialog: <div>
            <img src={Ycgzh} height="180" width="180"/>

          </div>
        });
        break;
      default:
        this.showDialog();
        break;
    }
  }

  render() {
    return (
      <Page className="home" infiniteLoader={false} ptr={false}>
        <Swiper
          height={120}>
          {
            this.state.home.swiper.map((v, k)=> {
              return <img src={v.img}/>
            })
          }
        </Swiper>
        <Panel className="head-panel">
          <PanelHeader>
            <div className="title-bg"/>
            智慧服务
          </PanelHeader>
          <PanelBody>
            <Flex>
              {
                this.state.home.zhfw.map((v, k)=> {
                  return (
                    <FlexItem onClick={this.handleRouter.bind(this,v)}>
                      <div className="grid-ywbl">
                        <p style={{paddingTop:'15px'}}><img height="30" width="30" src={v.icon}/></p>
                        <p className="grid-title-text">{v.text}</p>
                      </div>
                    </FlexItem>)
                })
              }
            </Flex>
          </PanelBody>
        </Panel>

        <Panel className="head-panel">
          <PanelBody>
            <MediaBox type="appmsg" href="javascript:void(0);">
              <MediaBoxHeader><img src={Zjtt}/></MediaBoxHeader>
              <MediaBoxBody>
                <MediaBoxTitle>宜昌住建:某某某走访某某企业</MediaBoxTitle>
                <MediaBoxDescription>
                  2017年2月15日
                </MediaBoxDescription>
              </MediaBoxBody>
            </MediaBox>
          </PanelBody>
        </Panel>

        <Panel className="head-panel">
          <PanelHeader>
            <div className="title-bg"/>
            综合查询
          </PanelHeader>
          <PanelBody>
            <Flex>
              {
                this.state.home.gccx.map((v, k)=> {
                  return (
                    <FlexItem onClick={this.handleRouter.bind(this,v)}>
                      <div className="grid-ywbl">
                        <p style={{paddingTop:'15px'}}><img height="30" width="30" src={v.icon}/></p>
                        <p className="grid-title-text">{v.text}</p>
                      </div>
                    </FlexItem>)
                })
              }
            </Flex>
          </PanelBody>
        </Panel>

        <Panel className="head-panel">
          <PanelHeader>
            <div className="title-bg"/>
            其他
          </PanelHeader>
          <PanelBody>
            <Flex>
              {
                this.state.home.cxzj.map((v, k)=> {
                  return (
                    <FlexItem onClick={this.handleRouter.bind(this,v)}>
                      <div className="grid-ywbl">
                        <p style={{paddingTop:'15px'}}><img height="30" width="30" src={v.icon}/></p>
                        <p className="grid-title-text">{v.text}</p>
                      </div>
                    </FlexItem>)
                })
              }
            </Flex>
          </PanelBody>
        </Panel>
        <MFooter/>
        <Dialog title={this.state.titleDialog} buttons={[{
            label: '确定',
            onClick: this.hideDialog
            }]} show={this.state.showDialog}>
          {this.state.messageDialog}
        </Dialog>

      </Page>
    )
  }


  componentWillMount() {

  }

  componentDidMount() {

  }

  componentWillReceiveProps(nextProps) {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.home || {};

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

  componentWillUpdate(nextProps, nextState) {

  }


  componentDidUpdate(prevProps, prevState) {

  }


  componentWillUnmount() {

  }
}

ReactMixin.onClass(Home, Reflux.connect(Store, 'home'));

export default Home;
